<template>
   <van-nav-bar>
      <template #left>
         <router-link to="/city">城市</router-link>
      </template>
      <template #title>
         <router-link to="/search">卡姿兰大眼睛</router-link>
      </template>
      <template #right>
         <router-link to="/login" v-if="!user.userid">登录</router-link>
         <router-link to="/user" v-else>我的</router-link>
      </template>
   </van-nav-bar>
</template>

<script setup lang="ts">
import {useUserStore} from '@/store/userStore'
// 用户store
const user = useUserStore()
</script>

<style scoped lang="scss">
.van-nav-bar {
  font-weight: bold;
  background: #d30707;
  :deep(.van-nav-bar__left) {
    a {
      color: #fff;
    }
    font-size: 16px;
  }
  :deep(.van-nav-bar__title) {
    background: #fff;
    height: 32px;
    max-width: 70%;
    line-height: 32px;
    flex: 1;
    border-radius: 30px;
    box-sizing: border-box;
    padding-left: 36px;
    text-align: left;
    color: #232326;
    font-size: 12px;
  }
  :deep(.van-nav-bar__right) {
    font-size: 16px;
    a {
      color: #fff;
    }
  }
}
</style>
